<template>
	<view class="bgf">
		<custom-nav :title="'财务管理'"></custom-nav>
		<view class="p20">
			<view
				class="card-content df ac"
				:class="
					activeFormList && activeFormList.length > 0 ? '' : 'jsc'
				"
			>
				<view
					class="df flex-wrap mt30"
					style="width: 100%"
					v-if="activeFormList && activeFormList.length > 0"
				>
					<view
						class="df fdc ac w25 mb30"
						v-for="(item, inx) in activeFormList"
						:key="inx"
						@tap="enterItem(item)"
					>
						<view
							class="background-icon"
							:style="'background: ' + item.logo.background"
						>
							<view class="icon-cont">
								<uni-icons
									color="#fff"
									custom-prefix="iconfont"
									:type="`${item.logo.icon.replace(
										'el-',
										''
									)}`"
									size="28"
								></uni-icons>
							</view>
						</view>
						<view class="item-name">{{ item.formName }}</view>
					</view>
				</view>
				<view v-else class="c6 f32"> 请先去电脑端配置 </view>
			</view>
		</view>
	</view>
</template>
<script>
export default {
	data() {
		return {
			activeFormList: [],
		}
	},
	onLoad() {
		this.getGroupModels()
	},
	methods: {
		enterItem(row) {
			uni.navigateTo({
				url: `/subPackagesIndex/pages/index/approval/launch/launchApproval?code=${row.formId}`,
			})
		},
		getGroupModels() {
			uni.showLoading({
				title: '加载中...',
			})
			this.$request
				.request('wflow/wflow/model/list/byUser', {
					data: {},
				})
				.then((rsp) => {
					uni.hideLoading()
					rsp &&
						rsp.length > 0 &&
						rsp.forEach((group) => {
							group.items.forEach((item) => {
								item.logo = JSON.parse(item.logo)
							})
						})
					this.activeFormList = rsp.find(
						(item) => item.name.indexOf('财务') !== -1
					).items
				})
		},
	},
}
</script>
<style lang="scss" scoped>
.background-icon {
	width: 100rpx;
	height: 100rpx;
	border-radius: 25rpx;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	.icon-cont {
		height: 100rpx;
		line-height: 100rpx;
	}
}
.item-name {
	margin-top: 15rpx;
	font-size: 26rpx;
	color: #666;
	max-width: 80px;
	text-align: center;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
</style>
